<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=careRecord-width, initial-scale=1, maximum-scale=1">
    <% include("/templates/common/header.html"){} %>
    <!-- jqgrid-->
    <link href="${ctxPath!}/css/bootstrap.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath!}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath!}/jqgrid/jqgrid.css" rel="stylesheet">
    <style>
        .ui-jqgrid-btable tbody tr td{
            vertical-align: middle!important;
        }
    </style>
</head>
<body>
<div class="content-search">
    <form id="search" class="layui-form layui-form-pane" lay-filter="form">
        <div class="layui-inline" style="margin-left: 10px;">
            <label>从</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="start">
            </div>
            <label>到</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="end">
            </div>
            <div class="layui-input-inline">
                <input type="text" id="keyword" autocomplete="off" class="layui-input" placeholder="请输入客户姓名关键字" onchange="search()">
            </div>
            <div class="layui-inline">
                <atom:auth type="button" perm="sys:careRecord:list"  iconText="&#xe615;" onclick="return search();" text=" 搜索"/>
            </div>
        </div>
    </form>
</div>
<!-- 内容主体区域 -->
<div style="padding: 2px;">
    <div class="jqGrid_wrapper">
        <table id="table"></table>
        <div id="pager" ></div>
    </div>
</div>
</div>
<script src="${ctxPath!}/jquery/jquery.min.js?v=2.2.4"></script>
<script src="${ctxPath!}/jquery/jquery.form.js?v=3.50.0"></script>
<script src="${ctxPath!}/jqgrid/i18n/grid.locale-cnffe4.js?0820"></script>
<script src="${ctxPath!}/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>
<script src="${ctxPath!}/jqgrid/frozen.js?v=1.0.1"></script>
<script src="${ctxPath!}/jqgrid/myjqGrid.js"></script>
<script src="${ctxPath!}/layui/layui.js"></script>
<script>

    layui.use('form', function(){
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#end'
            ,type: 'datetime'
        });
    });

    var colNames = ["发送职员名称" ,"关怀客户姓名","关怀客户账号","关怀时间","结果","内容"];
    var colModel = [{
        name : "workerName",
        index : "workerName",
        sortable : false,
        editable : false,
        width : 50,
        align : "center"
    },{
        name : "clientName",
        index : "clientName",
        sortable : false,
        editable : false,
        width : 50,
        align : "center"
    },{
        name : "clientAccount",
        index : "clientAccount",
        editable : false,
        sortable : false,
        width : 50,
        align : "center"
    },{
        name : "sendDate",
        index : "sendDate",
        editable : false,
        sortable : false,
        width : 70,
        align : "center"
    },{
        name : "result",
        index : "result",
        editable : false,
        sortable : false,
        width : 30,
        align : "center"
    },{
        name : "content",
        index : "content",
        editable : false,
        sortable : false,
        width : 150,
        align : "center"
    }];

    var myJqGrid = null;
    $(document).ready(function () {
        myJqGrid = new MyJqGrid({
            jqGrid_id: 'table',
            data: "${ctxPath!}/sys/careRecord/list.json",
            isSubGrid: false,
            autowidth: true,
            shrinkToFit: true,
            autoScroll: true,
            colNames: colNames,
            colModel: colModel
        })
    });


    function search(){
        myJqGrid.reloadGrid({'start':$("#start").val(),'end':$("#end").val(),'keyword':$("#keyword").val()});
        return false;
    }

</script>
</body>
</html>